<!--
	图例面板
	Created by Penglei on 2023/08/16
-->
<template>
	<div class="panel-legend">
		<div class="title">
			<div class="title-left">
				<el-divider direction="vertical" />{{ props.title || '' }}
			</div>
			<div class="title-right">{{ props.subTitle || '' }}</div>
		</div>
		<ul class="legend">
			<li class="legend-item" v-for="(item, index) in arrList" :key="index">
				<div class="legend-item-color" :style="{ backgroundColor: item.color || false }"></div>
				<div class="legend-item-text">{{ item.name }}</div>
			</li>
		</ul>
	</div>
</template>

<script setup name="PanelLegend">
import { onMounted } from "vue";

// 组件事件监听
const emit = defineEmits();
// 父组件传参
const props = defineProps({
	// 标题
	title: {
		type: String,
		required: false,
		default: () => ''
	},
	// 子标题
	subTitle: {
		type: String,
		required: false,
		default: () => ''
	},
	// 列表
	list: {
		type: Array,
		required: false,
		default: () => []
	}
});

let arrList = ref([]);
// 挂载
onMounted(() => {
	// 排序并渲染
	arrList.value = props.list.sort((a, b) => a.sort - b.sort);
});
</script>

<style lang="scss" scoped>
.panel-legend {
	color: #FFFFFF;

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 20px;
		margin: 20px auto;
		padding: 0 15px;

		.el-divider {
			border-width: 2px;
		}
	}

	.legend {
		font-size: 18px;
		padding: 0;
		display: flex;
		flex-wrap: wrap;

		&-item {
			width: 50%;
			height: 32px;
			line-height: 32px;
			padding-left: 35px;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			&-color {
				width: 55px;
				height: 18px;
			}

			&-text {
				margin-left: 15px;
			}
		}
	}
}
</style>